<template>
  <div
    v-show="menuData.show"
    class="context-menu"
    :style="{ top: `${menuData.y}px`, left: `${menuData.x}px` }"
  >
    <ul>
      <li v-if="menuData.type == 1" @click="handleAction('去发帖')">去发帖</li>
      <li v-if="menuData.type != 3" @click="handleAction('置顶操作')">
        {{ menuData.item?.isTop == 0 ? '置顶' : '取消置顶' }}
      </li>
      <li v-if="menuData.type != 1" @click="handleAction('去更新')">
        更新文章
      </li>
      <el-popconfirm
        :title="
          menuData.type == 0 ? '真的要删除该文章吗?' : '真的要删除该标签吗?'
        "
        confirm-button-text="是"
        cancel-button-text="否"
        width="220"
        @confirm="confirmEvent"
      >
        <template #reference>
          <li>删除</li>
        </template>
      </el-popconfirm>
    </ul>
  </div>
  <div
    v-show="menuData.show"
    class="mask"
    @click="props.menuData.show = false"
    @contextmenu.prevent="contextmenu"
  ></div>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  import { updateArticle } from '@/api/article'
  import { updateTag } from '@/api/tag'
  const router = useRouter()
  const props = defineProps({
    menuData: {
      type: Object,
      default: () => ({ x: 0, y: 0, show: false, item: {}, type: 0 })
    }
  })
  const emit = defineEmits(['action', 'flash'])
  const handleAction = action => {
    if (action === '置顶操作') {
      if (props.menuData.type == 0) {
        updateArticle({
          id: props.menuData.item.id,
          pictureId: props.menuData.item.coverId,
          isTop: props.menuData.item.isTop == 0 ? 1 : 0
        }).then(() => {
          ElMessage.success('修改成功')
          emit('flash')
        })
      } else {
        updateTag({
          id: props.menuData.item.id,
          isTop: props.menuData.item.isTop == 0 ? 1 : 0
        }).then(() => {
          ElMessage.success('修改成功')
          emit('flash')
        })
      }
    }
    if (action === '去发帖') {
      router.push({ path: '/post', query: { tagId: props.menuData.item.id } })
    }
    if (action === '去更新') {
      router.push({ path: '/post', query: { id: props.menuData.item.id } })
    }
    props.menuData.show = false
  }
  const contextmenu = e => {
    props.menuData.show = false
  }
  const confirmEvent = () => {
    props.menuData.show = false
    emit('action', { id: props.menuData.item.id, type: props.menuData.type })
  }
</script>

<style scoped>
  .context-menu {
    position: fixed;
    z-index: 1000;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--color-background);
    box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    font-family: 'PingFang SC', sans-serif;
    cursor: pointer;
    user-select: none;
    text-align: center;
  }

  .context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .context-menu li {
    cursor: pointer;
    padding: 5px 20px;
  }

  .context-menu li:hover {
    background-color: var(--color-active-background);
    border-radius: 5px;
  }

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }
</style>
